<template>
  <div>
     <!-- 此层为最外层容器盒子 -->
      <el-container class="big_box">
          <!-- 头部开始 -->
          <el-header class="big_title">
              <div class="big_title_left">京源睿谷生态科技城物联网监控系统</div>
              <div>
                  <div v-for="(item,index) in tabLi" :key="index" :class="{ on: isActive === index}" @click="changeClass(index)">{{item}}</div>
              </div>
              <div class="big_title_right">
                  <!-- <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                  </ul> -->
                  <!-- <button>退出登录</button> -->
                  <div class="time_box">
                      <div>{{ nowDate }}</div>
                      <div>
                          <p>{{ getWeek }}</p>
                          <p>{{nowYear}}</p>
                      </div>
                  </div>
                  <i class="el-icon-switch-button" style="font-size:.32rem;"></i>
              </div>
          </el-header>
          <!-- 头部结束 -->
          <!-- 侧边栏开始 -->
          <el-container>
              <el-aside>
                  <el-menu style="background-color: transparent;" :unique-opened="true"  :collapse-transition="true" :accordion="true">
                       <router-link v-for="(item,index) of arr" :key="index" :to="item.path">
                          <el-submenu :index="String(index)">
                              <template slot="title" class="aaa"><i style="font-size:.08rem;color:#fff;" :class="item.meta.icon"></i>{{item.meta.name}}</template>
                              <el-menu-item-group v-bind:hidden="item.children?false:true">
                                  <el-menu-item style="min-width: 0 !important;" v-for="(item1,index1) in item.children" :key="index1" :index="index+'-'+(index+1)"><router-link :to="item1.path">{{item1.meta.name}}</router-link></el-menu-item> 
                              </el-menu-item-group>
                          </el-submenu>
                      </router-link>
                  </el-menu>
              </el-aside>
          <!-- 侧边栏结束 -->
              <el-main>
                  <router-view>
                     <!-- <router-view></router-view> -->
                  </router-view>
              </el-main>
          </el-container>
      </el-container>
      <!-- 此层为最外层容器盒子结束 -->

  </div>
</template>
<script>
export default {
  data() {
      return {
          arr: [],
          nowYear: '',
          nowDate: '',
          getWeek: '',
          timer: '',
          // 头部点击切换选项
          tabLi: ['系统首页', '设备配置'],
          isActive: 0,//标识
          
      }
  },
  beforeCreate() {
      
  },
  created() {
      this.function()
      this.timer = setInterval(this.getDate, 1000);
      
  },
  beforeDestroy() {
      if (this.timer) {
          clearInterval(this.timer); // 在Vue实例销毁前，清除定时器
      }
  },
  methods: {
      function() {//获取路由中的meta元数据，填入侧边栏
          console.log(this.$router.options.routes);
          let newArray = []
          this.$router.options.routes.forEach((item) => {
              newArray = (item.children)
          })
          this.arr = newArray
          console.log(this.arr);
          // let newArray = []
          // let obj = this.arr.forEach(item => {
          //     newArray.push(item.meta)

          // })
          // console.log(newArray);
          // this.arr = newArray

      },
      //获取日期，时间，星期几
      getDate() {
          let date = new Date()
          const year = date.getFullYear();//获取当前年
          const month = date.getMonth() + 1;//获取当前月
          const day = date.getDate();//获取当前日
          const hour = date.getHours();//获取当前时
          const minute = date.getMinutes();//获取当前分
          const second = date.getSeconds();//获取当前秒
          // console.log(year, month, day, hour, minute, second);
          // 拼接年月日
          this.nowYear = year + '-' + (month >= 10 ? month : '0' + month) + '.' + (day >= 10 ? day : '0' + day)
          // 拼接时分秒
          this.nowDate = (hour >= 10 ? hour : '0' + hour) + ':' + (minute >= 10 ? minute : '0' + minute)
          let week = new Date(date).getDay()
          let weeks = ['日', '一', '二', '三', '四', '五', '六']
          this.getWeek = '星期' + weeks[week]
          
      },
      changeClass(el) {
          this.isActive = el
      }
      
  }
}
</script>
<style>
@import '@/assets/rest.css';
@import'@/assets/demo1.css';
</style>